@extends('layout.ionic')

@section('title')
    失物招领
@endsection

@section('content')

    <style>
        body{
            background-color: #fff;;
        }
    </style>

    <div id="app" style="overflow-x: hidden;overflow-y: scroll;height: 100%;;" v-on:scroll="scroll">

        @include('app.lost.list')

        @include('app.lost.me')

        @include('app.lost.publish')

        @if(Auth::guard('wechat')->user()->havePermission('lost_audit'))
        @include('app.lost.audit')
        @endif

        <div class="tabs tabs-icon-top" id="tab">
            <a class="tab-item " v-bind:style="index == 1 ? {color:'#1aad19'} : ''" v-on:click="index = 1">
                <i class="icon ion-home"></i>
                失物列表
            </a>
            <a class="tab-item" v-bind:style="index == 2 ? {color:'#1aad19'} : ''" v-on:click="index = 2">
                <i class="icon ion-person"></i>
                我的失物
            </a>
            <a class="tab-item" v-bind:style="index == 3 ? {color:'#1aad19'} : ''" v-on:click="index = 3">
                <i class="icon ion-edit"></i>
                捡到失物
            </a>
            @if(Auth::guard('wechat')->user()->havePermission('lost_audit'))
            <a class="tab-item" v-bind:style="index == 4 ? {color:'#1aad19'} : ''" v-on:click="index = 4">
                <i class="icon ion-document-text"></i>
                招领审核
            </a>
            @endif
        </div>
    </div>

@endsection

@section('js')
    @include('app.partial.confirm')
    @include('app.partial.alert')
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>

        wx.config(<?php echo $js->config(array('chooseImage', 'uploadImage', 'previewImage'), false, true) ?>);

        var tab = new Vue({
            el: '#tab',
            data: {
                index: 2,
                number: '{{ Auth::guard('wechat')->user()->number }}',
                open_id: '{{ Auth::guard('wechat')->user()->open_id }}'
            },
            methods: {

            },
            created: function(){
                wx.ready(function(){
                    wx.hideOptionMenu();
                });
            }
        });

        var list = new Vue({
            el: '#list',
            data: {
                losts: [],
                page: 1,
                loading: false,
                nextPageUrl: '{{ route('lost.list') }}?page=1'
            },
            methods: {
                getList: function(){
                    this.loading = true;
                    this.$http.get(this.nextPageUrl).then(function(response){
                        var data = response.data;
                        list.losts = list.losts.concat(data.data);
                        list.nextPageUrl = data.next_page_url;
                        list.loading = false;
                        loading.show = false;
                    });
                },
                getContact: function (lost) {
                    var contact = '联系方式：';
                    if(lost.role === 1){
                        return contact + '膳管会 ' + lost.user.name.substr(0, 1) + '同学 ';
                    }else{
                        if(this.isLoser(lost) || lost.user.number == tab.number || !lost.name){
                            return contact + lost.user.name.substr(0, 1) + '同学 ' + this.getPhone(lost);
                        }else{
                            return contact + '仅失主本人可看';
                        }
                    }
                },
                isLoser: function(lost){
                    return lost.number === tab.number;
                },
                getPhone: function(lost){
                    return lost.user.cellphone + ' ' + lost.user.short_phone;
                },
                previewImage: function(url){
                    wx.previewImage({
                        current: url, // 当前显示图片的http链接
                        urls: [url] // 需要预览的图片http链接列表
                    });
                },
                scroll: function(){
                    console.log('tset');
                }
            },
            mounted: function(){
                loading.showLoading();
                this.getList();
            }
        });

        var me = new Vue({
            el: '#me',
            data: {
                losts: []
            },
            methods: {
                getMine: function(){
                    this.$http.post('{{ route('lost.mine') }}').then(function(response){
                        me.losts = response.data;
                    });
                },
                getQrCode: function(lost){
                    if(lost.role === 1){
                        loading.showLoading('二维码加载中');
                        loading.show = true;
                        this.$http.get('{{ route('lost.code') }}?id=' + lost.code).then(function(response){
                            loading.show = false;
                            var pic = '<p onclick="list.previewImage(\'http://cdn.gike.pw/shanguan.jpg\')" style="color: #3097D1; text-decoration: underline;">如何联系膳管？</p>';
                            var code = '<img style="width: 100%;" v-on:click="previewImage(' + response.data + ')" src="'+response.data+'">';
                            alertComponent.showAlert('请出示二维码给膳管会', pic + code);
                        }, function(response){
                            alertComponent.showAlert('获取失败', '获取二维码失败，请稍后重试');
                        });
                    }
                }
            },
            mounted: function(){
                this.getMine();
            }
        });

        var publish = new Vue({
            el: '#publish',
            data: {
                isImage: false,
                image: '',
                form: {
                    number: '',
                    cellphone: '{{ Auth::guard('wechat')->user()->cellphone }}',
                    shortPhone: '{{ Auth::guard('wechat')->user()->short_phone}}',
                    description: '',
                    media_id: ''
                }
            },
            methods: {
                chooseImage: function(){
                    wx.chooseImage({
                        count: 1,
                        sizeType: ['compressed'],
                        sourceType: ['album', 'camera'],
                        success: function (res) {
                            publish.isImage = true;
                            publish.image = res.localIds[0];
                            publish.uploadImage(res.localIds[0]);
                        }
                    });
                },
                uploadImage: function(localId){
                    wx.uploadImage({
                        localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            publish.form.media_id = res.serverId; // 返回图片的服务器端ID
                        }
                    });
                },
                clickImage: function(){
                    confirmComponent.showConfirm('删除图片', '', function(){
                        loading.show = false;
                        publish.isImage = false;
                        publish.form.media_id = '';
                    });
                },
                guide: function(){
                    alertComponent.showAlert('平台宗旨', '我们家产品经理说了，丢东西这事件是很被动的，' +
                        '失主着急是没用的，只有拾获者主动交还失物才有意义<br><br>拾金不昧是我们的传统美德，' +
                        '当你捡到失物时请记得告诉小哥哦');
                },
                publish: function(){
                    @if(!Auth::guard('wechat')->user()->havePermission('lost_publish'))
                    if(this.form.number && !this.form.media_id){
                        console.log(this.publish.media_id);
                        alertComponent.showAlert('信息不完成', '请添加图片');
                        return false;
                    }
                    @endif
                    if(!this.form.description){
                        alertComponent.showAlert('信息不完整', '请填写招领描述');
                        return false;
                    }
                    if(!this.form.shortPhone && !this.form.cellphone){
                        alertComponent.showAlert('联系方式不完整', '请填写联系方式');
                        return false;
                    }
                    loading.showLoading('发布招领中');
                    this.$http.post('{{ route('lost.publish') }}', publish.form).then(function(response){
                        loading.show = false;
                        var data = response.data;
                        if(data.code == 200){
                            alertComponent.showAlert('发布成功');
                            @if(!Auth::guard('wechat')->user()->havePermission('lost_publish'))
                                window.location.href=window.location.href+"?token=" + 10000 * Math.random();
                            @endif
                        }else{
                            alertComponent.showAlert('发布失败', data.msg);
                        }
                    }, function(response){
                        loading.show = false;
                        var data = response.data;
                        var msg = '';
                        if(data.hasOwnProperty('shortPhone')){
                            msg += data.shortPhone + '<br>';
                        }
                        if(data.hasOwnProperty('cellphone')){
                            msg += data.cellphone;
                        }
                        if(data.hasOwnProperty('number')){
                            msg += data.number;
                        }
                        alertComponent.showAlert('发布失败', msg);
                    });
                }
            }
        })


        @if(Auth::guard('wechat')->user()->havePermission('lost_audit'))
        var audit = new Vue({
            el: '#audit',
            data: {
                lists: []
            },
            methods: {
                getUnAudit: function(){
                    this.$http.get('{{ route('lost.pending') }}').then(function(response){
                        audit.lists = response.data;
                    });
                },
                changeStatus: function(lost, status){
                    var title, content;
                    if(status === 3){
                        title = '审核不通过';
                        content = '不通过将删除此招领，确认删除？';
                    }else{
                        title = '审核通过';
                        content = '通过后将会发送通知给本人，确认通过？';
                    }
                    confirmComponent.showConfirm(title, content, function(){
                        this.$http.post('{{ route('lost.audit') }}', {id: lost.id, status: status}).then(function(response){
                            loading.show = false;
                            audit.lists = audit.lists.filter(function(item){
                                return lost.id != item.id;
                            });
                        }, function(response){
                            loading.show = false;
                            alertComponent.showAlert('操作失败', '请稍后重试');
                        });
                    });
                }
            },
            mounted: function(){
                this.getUnAudit();
            }
        })
        @endif
    </script>

@endsection